@namespace FluentCMS.Web.Plugins

<Modal Placement="ModalPlacement.Top" Visible Size="ModalSize.Large" OnClose="HandleCancel">
    <ModalHeader>
        <ModalTitle>
            Choose File
        </ModalTitle>
    </ModalHeader>
    <div style="max-height: 60vh; overflow: auto;">
        <Breadcrumb style="height: 40px; padding-left: 24px;">
            @foreach (var breadcrumbItem in ParentFolders)
            {
                @if (breadcrumbItem.Id == FolderId)
                {
                    <BreadcrumbItem>
                        @breadcrumbItem.Name
                    </BreadcrumbItem>
                }
                else if(breadcrumbItem.Id == RootFolder?.Id)
                {
                    <BreadcrumbItem Link @onclick="() => NavigateFolder(breadcrumbItem.Id)" IconName="IconName.Folder">
                        @breadcrumbItem.Name
                    </BreadcrumbItem>
                }
                else
                {
                    <BreadcrumbItem Link @onclick="() => NavigateFolder(breadcrumbItem.Id)">
                        @breadcrumbItem.Name
                    </BreadcrumbItem>
                }
            }
        </Breadcrumb>

        <FilesTable @ref="FilesTable" @key="@FolderId" @bind-FolderId="@FolderId" @bind-ParentFolders="ParentFolders" OnRowClick="(AssetDetail item) => OnSelectFile(item)">
            <ActionsFragment>
                <ActionButton Visible="!context.IsFolder" IconName="IconName.Check" Label="Select" @onclick="() => OnSelectFile(context)" />
                <ActionButton Visible="!context.IsFolder" IconName="IconName.Download" Label="Download" target="_blank" Href="@GetDownloadUrl(context)" Color="Color.Primary" />
                <ActionButtonOpen Visible="context.IsFolder" @onclick="() => NavigateFolder(context.Id)" />
            </ActionsFragment>
        </FilesTable>
    </div>
    <ModalBody>
        <Grid>
            <GridItem Small="GridItemColumn.Twelve">
                <Stack>
                    <Button Color="Color.Primary">
                        <label style="margin: -10px -20px; padding: 10px 20px; cursor: pointer;">
                            Upload                        
                            <InputFile style="display: none;" accept="*" multiple OnChange="HandleFilesChanged" />
                        </label>
                    </Button>
                    <Button @onclick="HandleCancel">Cancel</Button>
                </Stack>
            </GridItem>
        </Grid>
    </ModalBody>
</Modal>